<template>
  <div id="Information">
    <!-- 头部 -->
    <v-header :isSelect='7'></v-header>
    <!-- 表格部分 -->
    <div class="Information-box">
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="考试资讯"
                     name="info">
          <v-info :tabStatus='tabStatus'></v-info>
        </el-tab-pane>
        <el-tab-pane label="考试须知"
                     name="notice">
          <v-info :tabStatus='tabStatus'></v-info>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 尾部 -->
    <v-footer></v-footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Info from '../components/InfoTwo'
import Footer from '@/components/Footer.vue'

export default {
  name: 'Information',
  components: {
    'v-header': Header,
    'v-info': Info,
    'v-footer': Footer
  },
  data () {
    return {
      // 选项卡
      activeName: 'info',
      // 传到InfoTwo页面的判断值
      tabStatus: 1
    }
  },

  computed: {},

  mounted () { },

  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
      // console.log(this.activeName)
      switch (this.activeName) {
        case 'info':
          this.tabStatus = 1
          break
        case 'notice':
          this.tabStatus = 2
          break
      }
    }
  }
}

</script>

<style lang='less'>
#Information {
  height: 100%;
  background: white;
  .Information-box {
    padding: 30px 54px 0;
    width: 80%;
    // width: calc(100% - 108px);
    height: calc(100% - 138px);
    // 选项卡
    .el-tabs {
      height: 100% !important;
      .el-tabs__header {
        .el-tabs__nav {
          border: none;
          .el-tabs__item {
            margin-right: 5px;
            border-radius: 10px 10px 0px 0px;
            background: #d9d9d9;
            width: 120px;
          }
          .is-active {
            background: #64b5f6 !important;
            color: white;
          }
        }
      }
      .el-tabs__content {
        height: calc(100% - 56px) !important;
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
